/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 数据大屏
 *  */
import React from 'react';
import { Button, Form, Icon, Input, Row, Col, Typography } from 'antd';
import DocumentTitle from 'react-document-title';
import GlobalFooter from '@/components/GlobalFooter';
import { connect, useDispatch, useSelector } from 'dva';
import { getCookie } from '@/utils/utils';
import ZyYlScreen from '@/pages/Post/BigScreen/ZyYlScreen';
import YzScreen from '@/pages/Post/BigScreen/YzScreen';
import PostScreen from '@/pages/Post/BigScreen';
import styles from './BigDataLayout.less';

const { Title } = Typography;

const links = [
  {
    key: 'help',
    title: '帮助',
    href: '',
  },
  {
    key: 'privacy',
    title: '隐私',
    href: '',
  },
  {
    key: 'terms',
    title: '条款',
    href: '',
  },
];

const Login = Form.create()(({ form, id, onSubmit }) => {
  const { getFieldDecorator, validateFields } = form;
  const dispatch = useDispatch();
  const loading = useSelector(_ => _.loading);

  const handleSubmit = e => {
    e.preventDefault();
    validateFields((err, value) => {
      if (err) return;
      dispatch({
        type: 'global/bigScreenLogin',
        payload: {
          sign: id,
          ...value,
        },
      }).then(() => {
        onSubmit && onSubmit(true);
      });
    });
  };

  return (
    <Form onSubmit={handleSubmit} className="login-form">
      <Form.Item>
        {getFieldDecorator('password', {
          rules: [{ required: true, message: '请输入密码' }],
        })(
          <Input
            allowClear
            type="password"
            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
            placeholder="请输入密码"
          />,
        )}
      </Form.Item>
      <Form.Item>
        <Button
          loading={loading.effects['global/bigScreenLogin']}
          type="primary"
          htmlType="submit"
          className="login-form-button"
        >
          登录
        </Button>
      </Form.Item>
    </Form>
  );
});

@connect(({ setting }) => ({
  ...setting,
}))
class BigDataLayout extends React.PureComponent {
  state = {
    hasLogined: false,
  };

  componentDidMount() {
    const { match: { params } = {}, dispatch } = this.props;
    const { id } = params;
    const localeToken = getCookie(id);
    if (localeToken) {
      this.setState(
        {
          hasLogined: true,
        },
        () => {
          this.checkLogined();
        },
      );
      dispatch({
        type: 'global/save',
        payload: {
          screenToken: localeToken,
          screenKey: id,
        },
      });
    }
  }

  onSubmit = status => {
    const { match: { params } = {}, dispatch } = this.props;
    const { id } = params;
    dispatch({
      type: 'global/save',
      payload: {
        screenKey: id,
      },
    });

    this.setState(
      {
        hasLogined: status,
      },
      () => {
        this.checkLogined();
      },
    );
  };

  checkLogined = () => {
    const { match: { params } = {} } = this.props;
    const { id } = params;
    this.queryTimer = setInterval(() => {
      const hasToken = getCookie(id);
      if (!hasToken) {
        this.setState({
          hasLogined: false,
        });
        clearInterval(this.queryTimer);
      }
    }, 2 * 1000);
  };

  render() {
    const { options, match: { params = {} } = {} } = this.props;
    const { platform } = params; // kb | zyyz (中邮驿站) | zyyl (中邮驿路)
    const { hasLogined } = this.state;
    const { recordNo, copyright, key, name } = options;
    const isZyAccount = key === 'post';

    return (
      <DocumentTitle title={`数据大屏-${name}`}>
        <div className={styles.container}>
          {hasLogined ? (
            <div className={styles.container_children}>
              {isZyAccount ? platform == 'zyyl' ? <ZyYlScreen /> : <PostScreen /> : <YzScreen />}
            </div>
          ) : (
            <div className={styles.container_title}>
              <Row
                type="flex"
                justify="center"
                align="middle"
                style={{ width: '100%', height: '100%', flexDirection: 'column' }}
              >
                <Col>
                  <Title>请输入密码后使用</Title>
                </Col>
                <Col span={4}>
                  <Login id={params.id} onSubmit={this.onSubmit} />
                </Col>
              </Row>
            </div>
          )}
          <GlobalFooter
            className={styles.container_globalFooter}
            links={links}
            copyright={
              <>
                Copyright <Icon type="copyright" /> {new Date().getFullYear()} {copyright}
              </>
            }
            recordNo={recordNo}
          />
        </div>
      </DocumentTitle>
    );
  }
}

export default BigDataLayout;
